<template>
  <div class="content_box">
    <div class="room_msg_box">
      <div class="img" @click="previewImage(roomMsg.roomImg)">
        <van-image
          width="750rpx"
          height="260rpx"
          fit="cover"
          lazy-load
          :src="roomMsg.roomImg && roomMsg.roomImg.length?roomMsg.roomImg[0]:''"
        />
        <div class="dots">
          <img mode="widthFix" src="/static/images/more_img.png" alt="" />
          {{roomMsg.roomImg && roomMsg.roomImg.length?roomMsg.roomImg.length:''}}
        </div>
      </div>
      <div class="msg">
        <div class="left">
          <p class="name">{{roomMsg.roomName}} ({{roomMsg.roomTypeName}})</p>
          <div class="label_box">
            <p v-for="(item,index) in roomMsg.labelVoList" :key="index">{{item.labelName}}</p>
          </div>
        </div>
        <p class="status" v-if="roomMsg.status == 'free'">空闲中</p>
        <p class="status on1" v-if="roomMsg.status == 'use'">消费中 {{roomMsg.endTime}}结束</p>
        <p class="status on2" v-if="roomMsg.status == 'due'">已预定 {{roomMsg.endTime}}结束</p>
        <p class="status on3" v-if="roomMsg.status == 'clear'">等待保洁打扫</p>
        <p class="status on4" v-if="roomMsg.status == 'stop'">整备中</p>
      </div>
    </div>
    <!-- <div @click="toRoom(item)" class="room_msg_box">
      <div class="box_b">
        <div class="img">
          <van-image
            width="180rpx"
            height="200rpx"
            fit="cover"
            lazy-load
            radius="10rpx"
            :src="roomMsg.roomImg && roomMsg.roomImg.length?roomMsg.roomImg[0]:''"
          />
          <p class="mc" v-if="roomMsg.status == 'free'">空闲中</p>
          <p class="mc" v-if="roomMsg.status == 'use'">正在使用</p> 
          <p class="mc" v-if="roomMsg.status == 'stop'">整备中</p> 
          <p class="mc" v-if="roomMsg.status == 'clean'">待打扫</p>  
        </div>
        <div class="right">
          <div class="msg">
            <div class="left">
              <p class="name">{{roomMsg.roomName}} ({{roomMsg.roomTypeName}})</p> 
              <div class="label_box">
                <p v-for="(item,index) in roomMsg.labelVoList" :key="index">{{item.labelName}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div> -->
    <div class="time_box">
      <div 
      :class="fiveDayIndex == index?'box on':'box'" 
      v-for="(item,index) in returnObj.fiveDayList" 
      :key="index"
      @click="fiveDayClick(item,index)"
      >
        <div v-if="item.isSelect">
          <p class="date">{{item.month}}-{{item.ri}}</p>
          <p class="text">{{item.week}}</p>
        </div>
        <div v-else class="man_on">
          <p class="date">{{item.month}}-{{item.ri}}</p>
          <p class="text">已满</p>
        </div>
      </div>
    </div>

    <div class="moshi_nr_box">
      <div class="moshi_box">
        <div 
        :class="parem.type == index?'on':''" 
        v-for="(item,index) in lanmu" 
        @click="lanmuClick(item,index)"
        :key="index"
        >
          <p class="name">{{item.name}}</p>
          <p class="line" v-if="parem.type == index"></p>
        </div>
        <p class="label">
          <span>限时优惠</span>
          <img src="/static/images/yh_label.png" alt="">
        </p>
      </div>
      <div class="tc_box" v-if="parem.type == 0">
        <div class="box">
          <p class="name">套餐选择：</p>
          <div class="price">
            <p 
            @click="timeLongClick(item,index)"
            :class="timeLongIndex == index?'on':''"
            v-for="(item,index) in returnObj.roomThaliPriceList" 
            :key="index">{{item.thaliName}}</p>
          </div>
        </div>
        <p class="fg_line"></p>
        <div class="box">
          <p class="name">时间选择：</p>
          <div class="time">
            <picker mode="time" :value="newTime" @change="timeChange">
              <p class="t">{{newTime?newTime:'00:00'}}<img src="/static/images/edit.png" alt=""></p>
            </picker>
            <p class="line">到</p>
            <p class="t">{{endTime?endTime:'00:00'}}</p>
          </div>
        </div>
      </div>
      <div class="tc_box" v-if="parem.type == 1">
        <div class="box">
          <p class="name">时长选择：</p>
          <div class="price">
            <p 
            @click="timeLongClick(item,index)"
            :class="timeLongIndex == index?'on':''"
            v-for="(item,index) in returnObj.roomHourPriceList" 
            :key="index">{{item.hours}}小时</p>
            <p>
              <picker mode="multiSelector" @change="otherChange" :range="multiArray">
                其他
              </picker>
            </p>
          </div>
        </div>
        <p class="fg_line"></p>
        <div class="box">
          <p class="name">时间选择：</p>
          <div class="time">
            <picker mode="time" :value="newTime" @change="timeChange">
              <p class="t">{{newTime?newTime:'00:00'}}<img src="/static/images/edit.png" alt=""></p>
            </picker>
            <p class="line">到</p>
            <p class="t">{{endTime?endTime:'00:00'}}</p>
          </div>
        </div>
      </div>
    </div>
    <block v-if="recentlyYyMsg && recentlyYyMsg.endTime">
      <div class="yd_box" @click="ydShow1 = true">
        <div>
          <img src="/static/images/home_icon6.png" alt="">
          {{recentlyYyMsg.startObj.month}}月{{recentlyYyMsg.startObj.ri}}日({{recentlyYyMsg.startObj.week}}) {{recentlyYyMsg.startObj.hours}}:{{recentlyYyMsg.startObj.minutes}} ~ {{recentlyYyMsg.endObj.hours}}:{{recentlyYyMsg.endObj.minutes}}
        </div>
        <p>查看更多<van-icon name="arrow" /></p>
      </div>
    </block>
    <div class="list_box">
      <div class="box">
        <p class="name">订单总价</p>
        <p class="text text_on">￥{{orderMsg.realPrice}}</p>
      </div>
      <div class="box">
        <p class="name">预约时间</p>
        <p class="text">{{startObj.month}}月{{startObj.ri}}日({{startObj.week}}) {{newTime}} 至 ({{endObj.week}}) {{endTime}}</p>
      </div>
      <div class="box">
        <p class="name">预约时长</p>
        <p class="text">{{orderMsg.hours}}小时</p>
      </div>
    </div>
    <div class="list_box">
      <div class="box">
        <p class="name"><span class="quan">券</span>优惠券</p>
        <p class="text text1" @click="toCoupon" v-if="orderMsg.couponNum && !couponMsg.name"><span>{{orderMsg.couponNum}}张可用</span><van-icon name="arrow" /></p>
        <p class="text" v-else-if="!orderMsg.couponNum && !couponMsg.name">暂无优惠券</p>
        <p @click="toCoupon" class="text text1" v-else><span>已选{{couponMsg.discount?couponMsg.discount+'折优惠券':couponMsg.content}}</span><van-icon name="arrow" /></p>
      </div>
      <div class="box" v-if="orderMsg.vipName">
        <p class="name"><span class="tuan">V</span>vip{{orderMsg.vipName}}</p>
        <p class="text text1" ><span>{{orderMsg.vipDiscount}}折</span></p>
      </div>
      <div class="box">
        <p class="name"><span class="tuan">团</span>团购券</p>
        <p class="text text_on" @click="toWriteOff"><span>去验券</span><van-icon name="arrow" /></p>
      </div>
      <div class="box">
        <p class="name"><span>卡</span>卡券</p>
        <p class="text">暂无卡券</p>
      </div>
    </div>
    <div class="play_msg">
      <p class="title">请选择支付方式</p>
      <div class="box">
        <van-radio-group :value="radio" @change="changePlay">

          
          <van-radio name="1" label-position="left">
            <div class="nr">
              <img mode="widthFix" src="/static/images/wx_play.png" alt="">
              <div>
                <p>微信支付</p>
              </div>
            </div>
          </van-radio>
          <van-radio name="2" label-position="left" style="border-bottom:none">
            <div class="nr b_margin">
              <img mode="widthFix" src="/static/images/ye_play.png" alt="">
              <div>
                <p>余额支付({{orderMsg.walletBalance?orderMsg.walletBalance:'0.00'}})</p>
              </div>
            </div>
          </van-radio>
        </van-radio-group>
        
        
      </div>
    </div>
    <div class="button_box" :style="{paddingBottom:isIphoneXnum+'px'}">
      <!-- <p class="tips_clear">该房间未打扫</p> -->
      <!-- 可以预约 -->
      <block v-if="roomMsg.status == 'free' || roomMsg.status == 'use' || roomMsg.status == 'due' || roomMsg.status == 'clear'">
        <div class="box">
          <div class="price_box1">
            <p class="price">
              <span class="totle1">总计：￥</span>
              <van-button 
                :loading="loadingPrice" 
                type="primary"
                color="#3d98f7"
                custom-style="font-family: PingFangSC-Regular, PingFang SC;border:none;background: none;text-align: center;color: #00C200;padding:0;font-size: 32rpx;min-width:60rpx"
              ><span>{{orderMsg.realPrice?orderMsg.realPrice:'0.00'}}</span></van-button>
              
            </p>
            <p class="totle">优惠：{{orderMsg.discounts}}</p>
          </div>
          <van-button 
            v-if="radio == '1'"
            @click="submit(0)"
            :disabled="loading"
            :loading="loading" 
            loading-text="支付中..."
            type="primary"
            color="#3d98f7"
            custom-style="font-family: PingFangSC-Regular, PingFang SC;border:none;width: 288rpx;height:80rpx;line-height: 80rpx;background: #00C200;border-radius: 40rpx;text-align: center;color: #fff;font-size: 32rpx;font-weight:500"
          >微信支付</van-button>
          <van-button 
            v-if="radio == '2' && !orderMsg.balancePay"
            @click="submit(1)"
            :disabled="loading"
            :loading="loading" 
            loading-text="支付中..."
            type="primary"
            color="#3d98f7"
            custom-style="font-family: PingFangSC-Regular, PingFang SC;border:none;width: 288rpx;height:80rpx;line-height: 80rpx;background: #00C200;border-radius: 40rpx;text-align: center;color: #fff;font-size: 32rpx;font-weight:500"
          >余额支付</van-button>
          <p v-if="radio == '2' && orderMsg.balancePay" class="button" @click="toCz" >立即充值</p>
        </div>
      </block>

      <!-- 整备中-不能预约 -->
      <blcok v-else>
        <div class="box">
          <div class="price_box1">
            <p class="price">
              <span class="totle1">总计：￥</span>
              <van-button 
                :loading="loadingPrice" 
                type="primary"
                color="#3d98f7"
                custom-style="font-family: PingFangSC-Regular, PingFang SC;border:none;background: none;text-align: center;color: #00C200;padding:0;font-size: 32rpx;min-width:60rpx"
              ><span>{{orderMsg.realPrice?orderMsg.realPrice:'0.00'}}</span></van-button>
              
            </p>
            <p class="totle">优惠：{{orderMsg.discounts}}</p>
          </div>
          <p class="button zb_on">整备中</p>
        </div>
      </blcok>
    </div>

    <!-- 提示 -->
    <div class="yy_pop_box tips_box" v-if="ydShow">
      <van-popup :show="ydShow">
        <div class="box">
          <img class="bj" src="https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230713/g7EgfPwFJ1s0tVML2GNz.png" alt="">
          <div class="nr">
            <p class="tips_text">温馨提示</p>
            <p class="tips_text1">不好意思，该时间段已被其他人
预约，请选择其他时间！</p>
            <p class="tips_text3">{{verifyMsg.startObj.month}}月{{verifyMsg.startObj.ri}}日({{verifyMsg.startObj.week}}) {{verifyMsg.startObj.hours}}:{{verifyMsg.startObj.minutes}}-{{verifyMsg.endObj.hours}}:{{verifyMsg.endObj.minutes}}</p>
          </div>
          <p class="anniu" @click="ydShow = false">我知道了</p>
        </div>
      </van-popup>
    </div>

    <!-- 预约时间段 -->
    <div class="yy_pop_box">
      <van-popup :show="ydShow1">
        <div class="box">
          <img class="bj" src="https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230710/DjzK7082ACUEA237aP38.png" alt="">
          <div class="nr">
            <div class="nr_box">
              <div :class="item.status == 0?'list':'list on'" v-for="(item,index) in returnObj.timeSlotList" :key="index">
                <p class="line"></p>
                <div class="time_box1">
                  <p class="quan"></p>
                  <div class="time">
                    <img v-if="item.status == 0" src="/static/images/kuang1.png" alt="">
                    <img v-else src="/static/images/kuang2.png" alt="">
                    <p class="text">{{item.startObj.month}}月{{item.startObj.ri}}日({{item.startObj.week}}) {{item.startObj.hours}}:{{item.startObj.minutes}}-{{item.endObj.hours}}:{{item.endObj.minutes}} <span>{{item.status == 0?'预定中':'消费中'}}</span></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <p class="anniu" @click="ydShow1 = false">我知道了</p>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import { 
  getToken,
  getUserPhone,
  getCouponMsg,
  removeCouponMsg
} from "@/utils/auth";
import { Debounce ,minTime} from "@/utils/index";
import { 
  getRoomDetails,
  getMode,
  timeSlotVerify,
  getFakeOrder,
  addOrder,
  walletPay,
  startPay
} from "@/api/index";
export default {
  data(){
    return{
      lowDate:'',
      parem:{
        roomId:'',
        type:0,//0-套餐 1-小时
      },
      fiveDayIndex:0,
      isIphoneXnum:0,
      radio:'1',
      lanmu:[
        {name:'套餐模式',type:0},
        {name:'小时模式',type:1}
      ],
      newTime:'',
      endTime:'',
      timeLongIndex:0,
      timeLong:0,
      returnObj:{},
      startObj:{},
      endObj:{},
      roomMsg:{},
      couponId:'',
      orderMsg:{},
      multiArray: [
        ['4小时','5小时','8小时','10小时'],
        ['0分钟','30分钟']
      ],
      radio:'1',
      loading:false,
      orderId:'',
      isPaySuccess:false,
      newDate:'',
      loadingPrice:true,
      ydShow:false,
      ydShow1:false,
      couponMsg:{},
      verifyMsg:{},
      recentlyYyMsg:{},
      qhFiveDayIndex:0,
      state:0,//0微信支付 1钱包支付
    }
  },
  methods: {

    // 跳转-充值
    toCz() {
      wx.navigateTo({
          url: `/pages/recharge/main`,
      });
    },

    // 调整验券
    toWriteOff(){
      wx.navigateTo({
        url: `/pages/writeOff/main`,
      });
    },

    // 跳转优惠券
    toCoupon(){
      wx.navigateTo({
        url: `/pages/room_xq/coupon/main?totalPrice=${this.orderMsg.realPrice}`,
      });
    },

    // 房间图片预览
    previewImage(img) {
      wx.previewImage({
        current: img[0], // 当前显示图片的http链接
        urls: img, // 需要预览的图片http链接列表
      });
    },

    // 支付
    submit(state) {
      this.state = state
      console.log(wx.requestSubscribeMessage)
      if(!getUserPhone()){
        wx.navigateTo({
          url: '/pages/authorization/main',
        });
        return
      }
      this.payment()
    },

    // 发起支付
    payment(){
      const that = this;
      // wx.getSetting({
      //   success (res){
      //     console.log(res)
      //     if (res.authSetting['scope.userInfo']) {
      //       // 已经授权
      //       console.log('已经授权')
      //     }else{
      //       console.log('未授权')
      //     }
      //   }
      // })
      // wx.requestSubscribeMessage({
      //   tmplIds: ['epYcHju4nnx63BqrOSrAHvr4yVjcrgJAA3HMpw9tGg0','NimuZsivd26CDqWTSAumxXr4y-6aGMLz1zvM1pZt0HE'],
      //   success: (res) => {
          // console.log(res);
            that.loading = true
            wx.showLoading({
              title: '支付中...'
            })
            let data = {
              couponId:that.couponMsg.couponId?that.couponMsg.couponId:'',
              hours:Number(that.orderMsg.hours?that.orderMsg.hours:4),
              roomId:that.parem.roomId,
              startTime:`${that.startObj.year}-${that.startObj.month}-${that.startObj.ri} ${that.startObj.hours}:${that.startObj.minutes}:00`,
              type:that.parem.type
            }

            if(!that.parem.type){// 套餐
              data.bizId = that.returnObj.roomThaliPriceList[that.timeLongIndex].id
            }else{// 时间段
              data.bizId = that.returnObj.roomHourPriceList[that.timeLongIndex].id
            }
            console.log(data)
            addOrder(data).then(res=>{
              if(res.statusCode == '00000'){
                if(res.data.startTime){
                  that.loading = false
                  wx.hideLoading()
                  that.ydShow = true
                  return
                }
                that.orderId=res.data.orderId
                let objReturn = !this.state ? startPay({orderId:res.data.orderId}):walletPay({orderId:res.data.orderId})
                objReturn.then(item=>{
                  if(item.statusCode == '00000'){
                    
                    setTimeout(() => {
                      if(!this.state){
                        wx.requestPayment({
                          timeStamp:item.data.timeStamp,
                          nonceStr:item.data.nonce_str,
                          package:`prepay_id=${item.data.prepay_id}`,
                          signType:"MD5",
                          paySign:item.data.sign,
                          success:function(succ){
                            console.log(succ)
                            if(succ.errMsg === "requestPayment:ok"){
                              that.isPaySuccess=true
                              wx.navigateTo({
                                url: `/pages/room_xq/success/main?orderId=${that.orderId}`,
                              });            
                            }
                          },
                          fail:function(err){
                            that.loading = false
                            wx.hideLoading()
                            that.$toast('支付失败！')
                          }
                        })
                        return
                      }
                      that.loading = false
                      wx.navigateTo({
                        url: `/pages/room_xq/success/main?orderId=${that.orderId}`,
                      });    
                    }, 1000); 
                  }else{
                    that.loading = false
                    that.isPaySuccess = false
                    wx.hideLoading()
                    that.$toast(item.message)
                  }
                }).catch(err=>{
                  wx.hideLoading()
                  that.loading = false
                  that.$toast('支付失败，请重新发起支付~')
                })
              }else{
                wx.hideLoading()
                that.loading = false
                // if(res.statusCode == '00001'){
                //   wx.showModal({
                //     title: '提示',
                //     content: '亲，不好意思，该时间段已被别人抢先预定了，请返回重新选择~',
                //     showCancel: false,
                //     confirmText:'我知道了',
                //     success: function (res) {
                //       if (res.confirm) {
                //         wx.navigateBack({
                //           delta: 1  // 返回上一级页面。
                //         })
                //       }
                //     }
                //   })
                //   return
                // }
                wx.showToast({
                  title: res.message, 
                  icon: 'none',
                  duration: 1500
                })
              }
            }).catch(err=>{
              that.loading = false
              that.$toast('支付失败，请重新发起支付~')
            })
      //   },
      //   fail: (res) => {
      //     console.log(res)
      //     if (res.errCode == 20004) {
      //       that.guideOpenSubscribeMessage();
      //     }
      //     console.log("取消")
      //   },
      //   complete: (errMsg) => {
      //       console.log("订阅消息 完成 " + errMsg); 
      //   }
      // })
    },

    guideOpenSubscribeMessage() {    
      var that = this;
      wx.showModal({         
        title: '提示',
        content: '检测到您没有开启订阅消息的权限，是否去设置？',
        success: function (sm) {
          if (sm.confirm) {// 用户点击了确定 可以调用删除方法了            
            wx.openSetting();
          } else if (sm.cancel) { 
            wx.showToast({
              title: '您没有同意授权订阅消息，订阅失败',
              icon: 'none'
            }); 
          }
        }
      })    
    },

    // 选择支付方式
    changePlay(e){
      console.log(e)
      this.radio = e.mp.detail
    },

    // 获取房间详情
    async getDetails(){
      await getRoomDetails({roomId:this.parem.roomId}).then(res=>{
        if(res.statusCode == '00000'){
          this.roomMsg = res.data
        }
      })
    },
    // 

    // 时间段验证-成功在查订单信息
    async getVerifyOrder(state,oneLong){
      this.loadingPrice = true
      let startTime = `${this.startObj.year}-${this.startObj.month}-${this.startObj.ri} ${this.startObj.hours}:${this.startObj.minutes}:00`
      let endTime = `${this.endObj.year}-${this.endObj.month}-${this.endObj.ri} ${this.endObj.hours}:${this.endObj.minutes}:00`
      let data = {
        startTime,
        endTime,
        roomId:this.parem.roomId
      }

      // 时间验证
      await timeSlotVerify(data).then(res=>{
        if(res.statusCode == '00000'){
          if(res.data.endTime){
            wx.hideLoading()
            res.data.startObj = this.getYearMonthDay(res.data.startTime.replace(/-/g, '/'))
            res.data.endObj = this.getYearMonthDay(res.data.endTime.replace(/-/g, '/'))
            this.verifyMsg = res.data
            this.ydShow = true
          }
        }else{
          wx.hideLoading()
          this.loadingPrice = false
          this.$toast(res.message)
        }
      })
      // 创建订单信息
      let data1 = {
        roomId:this.parem.roomId,
        couponId:this.couponMsg.couponId?this.couponMsg.couponId:'',
        type:this.parem.type,
        hours:Number(this.timeLong)
      }
      
      if(!this.parem.type){// 套餐
        data1.bizId = this.returnObj.roomThaliPriceList[this.timeLongIndex].id
      }else{// 时间段
        data1.bizId = this.returnObj.roomHourPriceList[this.timeLongIndex].id
      }
      
      await getFakeOrder(data1).then(res=>{
        if(res.statusCode == '00000'){
          this.orderMsg = res.data
          this.loadingPrice = false
          wx.hideLoading()
        }else{
          wx.hideLoading()
          this.loadingPrice = false
          this.$toast(res.message)
        }
      })
      

    },

    // 一周时间点击
    fiveDayClick(item,index){
      console.log(item)
      if(!item.isSelect){
        return
      }
      this.fiveDayIndex = index

      this.loadingPrice = true
      wx.vibrateShort({type:'heavy'});
      this.timeLongIndex = 0
      // this.newDate = `${item.day} 00:00:00`
      this.newDate = (`${item.day} 00:00:00`).replace(/-/g, '/')
      console.log(this.newDate)
      this.timeLong = this.returnObj.roomThaliPriceList[0].hours
      this.getDatePrice()
    },

    // 获取一周时间和时间段/套餐
    getDatePrice(statDate){
      getMode(this.parem).then(res=>{
        if(res.statusCode == '00000'){

          // 获取一周的时间并拆分
          const weekArr = ["周日","周一","周二","周三","周四","周五","周六"]
          res.data.fiveDayList.map(item=>{
            let date = new Date(item.day)
            let weekDay = date.getDay()
            item.month = date.getMonth()+1 < 10 ? '0' + (date.getMonth()+1) : (date.getMonth()+1)
            item.ri = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
            item.week = weekArr[weekDay]
          })
          res.data.fiveDayList[0].week = '今天'
          if(statDate && this.fiveDayIndex == this.qhFiveDayIndex){
            let index = res.data.fiveDayList.findIndex(item=>item.isSelect)
            this.fiveDayIndex = index
            this.qhFiveDayIndex = index
          }
          // 取默认小时
          if(!this.timeLong){
            if(!this.parem.type){// 套餐
              this.timeLong = res.data.roomThaliPriceList[0].hours
            }else{// 时间段
              this.timeLong = res.data.roomHourPriceList[0].hours
            }
          }

          // 用对象存起
          this.returnObj = res.data

          res.data.startTime = res.data.startTime.replace(/-/g, '/')
          // 开始,结束时间
          if(!this.newDate){
            // this.newDate = res.data.startTime
            this.newDate = res.data.startTime
          }
          if(new Date(this.newDate).getDate() == new Date(res.data.startTime).getDate()){
            this.newTime = this.getStartTime(res.data.startTime)
          }else{
            this.newTime = this.getStartTime(this.newDate)
          }
         
          this.endTime = this.getEndTime(this.timeLong)

          // 预约时间段
          if(res.data.timeSlotList&&res.data.timeSlotList.length){
            res.data.timeSlotList.map(child=>{
              child.startObj = this.getYearMonthDay(child.startTime)
              child.endObj = this.getYearMonthDay(child.endTime)
            })
            this.recentlyYyMsg = res.data.timeSlotList.find(item => item.status == 0)
            console.log(this.recentlyYyMsg)
          }

          // 验证时间并创建订单
          this.getVerifyOrder()

        }else{
          this.$toast(res.message)
        }
      })
    },

    // 获取开始时间
    getStartTime(time){
      this.startObj = this.getYearMonthDay(time)
      console.log(this.startObj)
      return `${this.startObj.hours}:${this.startObj.minutes}`
    },

    // 获取结束时间
    getEndTime(long){

      // 时间选择-开始时间
      let newTime = `${this.startObj.year}-${this.startObj.month}-${this.startObj.ri} ${this.startObj.hours}:${this.startObj.minutes}`
      console.log(Number(long))
      // 算结束时间
      let newGetTime = Number(long) * 3600000 + new Date(newTime).getTime()
      this.endObj = this.getYearMonthDay(newGetTime)
      console.log(this.endObj)
      return `${this.endObj.hours}:${this.endObj.minutes}`
    },

    // 获取年月日时分
    getYearMonthDay(time){
      const weekArr = ["周日","周一","周二","周三","周四","周五","周六"]
      let date = new Date(time);
      let obj = {}
      obj.year = date.getFullYear()
      obj.month = date.getMonth()+1 < 10 ? '0' + (date.getMonth()+1) : (date.getMonth()+1)
      obj.ri = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      obj.hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      obj.minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      obj.week = weekArr[date.getDay()]
      return obj
    },

    // 时间切换
    timeLongClick(item,index) {
      this.loadingPrice = true
      wx.vibrateShort({type:'heavy'});
      this.timeLongIndex = index
      this.timeLong = item.hours
      this.endTime = this.getEndTime(item.hours)

      // 判断是否其他新增的
      if(item.status){
        this.getVerifyOrder(true,item.hours)
        return
      }
      // 验证时间并创建订单
      this.getVerifyOrder()
    },

    // 其他时间选择
    otherChange(e){
      this.loadingPrice = true
      wx.vibrateShort({type:'heavy'});
      let one = e.mp.detail.value[0]
      let two = e.mp.detail.value[1]
      let oneLong = this.multiArray[0][one].split('小')[0]
      let twoLong = this.multiArray[1][two].split('分')[0]
      let arr = Object.assign([],this.returnObj.roomHourPriceList)
      let index = -1
      if(twoLong == '30'){
        this.timeLong = `${oneLong}.5`
        index = arr.findIndex(item=>Number(item.hours) == Number(`${oneLong}.5`))
      }else{
        this.timeLong = oneLong
        index = arr.findIndex(item=>Number(item.hours) == Number(oneLong))
      }
      if(index != -1){// 如果有相同的
        this.timeLongIndex = index
        if(arr[index].status){// 判断是否新增的
          console.log('是新增')
          if(twoLong == '30'){
            arr[index].hours = `${oneLong}.5`
            this.endTime = this.getEndTime(`${oneLong}.5`)
            this.getVerifyOrder(true,`${oneLong}.5`)
          }else{
            console.log('是新增222')
            arr[index].hours = oneLong
            this.endTime = this.getEndTime(oneLong)
            this.getVerifyOrder(true,oneLong)
          }
        }else{
          this.endTime = this.getEndTime(oneLong)
          this.getVerifyOrder()
        }
      }else{
        this.timeLongIndex = 0
        if(arr[0] && arr[0].status){// 判断是否新增的
          console.log('是新增1')
          if(twoLong == '30'){
            arr[0].hours = `${oneLong}.5`
            this.endTime = this.getEndTime(`${oneLong}.5`)
            this.getVerifyOrder(true,`${oneLong}.5`)
          }else{
            arr[0].hours = oneLong
            this.endTime = this.getEndTime(oneLong)
            this.getVerifyOrder(true,oneLong)
          }
        }else{
          if(twoLong == '30'){
            console.log('半小时')
            arr.unshift({
              status:true,
              hours:`${oneLong}.5`
            })
            this.endTime = this.getEndTime(`${oneLong}.5`)
            this.getVerifyOrder(true,`${oneLong}.5`)
          }else{
            arr.unshift({
              status:true,
              hours:oneLong
            })
            this.endTime = this.getEndTime(oneLong)
            this.getVerifyOrder(true,oneLong)
          }
        }
      }
     
      console.log(arr)
      this.returnObj.roomHourPriceList = arr
    },

    // 其他时间选择
    // otherChange(e){
    //   let one = e.mp.detail.value[0]
    //   let two = e.mp.detail.value[1]
    //   let oneLong = this.multiArray[0][one].split('小')[0]
    //   console.log(oneLong)
    //   let twoLong = this.multiArray[1][two].split('分')[0]
    //   let arr = this.returnObj.roomHourPriceList
    //   if(twoLong != '30'){// 证明是整数
    //     let index = this.returnObj.roomHourPriceList.findIndex(item=>Number(item.hours) == Number(oneLong))
    //     console.log(index)
    //     if(index != -1){// 如果有相同的
    //       console.log("dddd")
    //       console.log(this.returnObj.roomHourPriceList[index])
    //       if(this.returnObj.roomHourPriceList[index].status){// 判断是否新增的
    //         this.returnObj.roomHourPriceList.splice(0,1)
    //         this.returnObj.roomHourPriceList.unshift({
    //           status:true,
    //           hours:oneLong
    //         })
    //         this.timeLongIndex = index
    //         this.timeLong = oneLong
    //         this.endTime = this.getEndTime(oneLong)
    //         this.getVerifyOrder(true,oneLong)
           
    //       }else{
    //         this.timeLongIndex = index
    //         this.timeLong = oneLong
    //         this.endTime = this.getEndTime(oneLong)
    //         this.getVerifyOrder()
    //       }
    //     }else{
    //       if(this.returnObj.roomHourPriceList[0].status && this.returnObj.roomHourPriceList[0].status!= undefined){// 判断是否新增的
    //         console.log(this.returnObj.roomHourPriceList[0].status)
            
    //         this.returnObj.roomHourPriceList.splice(0,1)
    //         this.returnObj.roomHourPriceList.unshift({
    //           status:true,
    //           hours:oneLong
    //         })
    //         this.timeLongIndex = 0
    //         this.timeLong = oneLong
    //         this.endTime = this.getEndTime(oneLong)
    //         this.getVerifyOrder(true,oneLong)
    //       }else{
    //         console.log(this.returnObj.roomHourPriceList[0].status)
    //         this.timeLongIndex = 0
    //         this.timeLong = oneLong
    //         this.endTime = this.getEndTime(oneLong)
    //         this.getVerifyOrder(true,oneLong)
    //         this.returnObj.roomHourPriceList.unshift({
    //           status:true,
    //           hours:oneLong
    //         })
    //       }
    //     }
    //   }else{
    //     // this.timeLongIndex = 0
    //     // arr.unshift({
    //     //   hours:`${oneLong}.5`
    //     // })
        
    //   }
      
    // },

    // 时间选择
    timeChange(e){
      console.log(e)
      this.loadingPrice = true
      wx.vibrateShort({type:'heavy'});
      this.newTime = e.mp.detail.value
      this.startObj.hours = this.newTime.split(":")[0]
      this.startObj.minutes = this.newTime.split(":")[1]
      this.endTime = this.getEndTime(this.timeLong)

      // console.log(this.timeLongIndex)
      // console.log(this.returnObj.roomHourPriceList)
      // let {status,hours} = this.returnObj.roomHourPriceList[this.timeLongIndex-1]
      // console.log(status,hours)
      this.getVerifyOrder()
    },

    // 栏目切换
    lanmuClick(item){
      this.loadingPrice = true
      wx.vibrateShort({type:'heavy'});
      this.parem.type = item.type
      this.timeLongIndex = 0
      this.timeLong = 4
      // this.newTime = this.getStartTime(this.returnObj.startTime)
      // this.endTime = this.getEndTime(this.timeLong)

      this.getDatePrice()
    },

    //导航
    onGuideTap() {
      wx.openLocation({
        address: this.msg.address,
        name: this.msg.storeName,
        longitude: +this.msg.longitude,
        latitude: +this.msg.latitude,
        scale: 16
      })
    },

    // 房间图片预览
    previewImage(img) {
      wx.previewImage({
        current: img[0], // 当前显示图片的http链接
        urls: img, // 需要预览的图片http链接列表
      });
    },
    
  },
  onShow(){
    // 获取当前时间
    // if(!this.isPaySuccess){
    //   this.getDatePrice()
    // }
    this.couponMsg = getCouponMsg()
    console.log(this.couponMsg)
    console.log("dddd")
    this.radio = '1'
    this.isPaySuccess=false
    this.loading = false
    if(this.newDate || this.couponMsg.content){
      this.getVerifyOrder()
    }
    
    if (wx.canIUse("getUpdateManager")) {
      console.log("进去版本检测------->");
      const updateManager = wx.getUpdateManager();
      updateManager.onCheckForUpdate(function (res) {
        if (res.hasUpdate) {
          //下载成功
          updateManager.onUpdateReady(function () {
            wx.showModal({
              title: "更新提示",
              content: "新版本已经准备好，是否重启应用？",
              success: function (res) {
                if (res.confirm) {
                  updateManager.applyUpdate();
                }
              },
            });
          });
          //下载失败
          updateManager.onUpdateFailed(function () {
            wx.showModal({
              title: "已经有新版本了哟~",
              content: "新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~",
            });
          });
        } else {
          console.log("最新版本-------》");
        }
      });
    } else {
      wx.showModal({
        title: "提示",
        content:
          "当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。",
      });
    }
  },
  onLoad(options){
    console.log(options)
    if(options.scene){// 扫码进来
      this.parem.roomId = options.scene
    }else{// 传值进来
      this.parem.roomId = options.roomId
    }
    if(!getToken()){
      wx.login({
        success:(res)=>{
          let code = res.code
          this.$store.dispatch("userLogin", code).then(res=>{
            if(res.statusCode == '00000'){
              this.getDetails()
              this.getDatePrice(true)
            }
          })
        }
      })
    }else{
      this.getDetails()
      this.getDatePrice(true)
    }
    //判断手机机型，动态给底部添加样式
    wx.getSystemInfo({
      success: (res) => {
        console.log("手机信息res" + res.model);
        let modelmes = res.model;
        if (
          modelmes.search("iPhone 14") != -1 ||
          modelmes.search("iPhone 13") != -1 ||
          modelmes.search("iPhone 12") != -1 ||
          modelmes.search("iPhone 11") != -1 ||
          modelmes.search("iPhone X") != -1 ||
          modelmes.search("iPhone XR") != -1 ||
          modelmes.search("iPhone XS") != -1
        ) {
          this.isIphoneXnum = 25;
        } else {
          this.isIphoneXnum = 10;
        }
      },
    });
    removeCouponMsg()
  },
  onUnload() {
    this.parem.type = 0
    this.fiveDayIndex = 0
    this.qhFiveDayIndex = 0
    this.newDate = ''
    this.timeLong = 0
    this.timeLongIndex = 0
    this.loadingPrice = true
    this.ydShow = false
  },
};
</script>

<style lang="scss" scoped>
.content_box {
  min-height: 100vh;
  padding-bottom: 250rpx;
  background: #F5F5F5;
  .room_msg_box{
    .img{
      width: 100%;
      height: 260rpx;
      position: relative;
      .dots{
        position: absolute;
        bottom: 30rpx;
        right: 30rpx;
        width: 70rpx;
        height: 46rpx;
        background: rgba(0, 0, 0, 0.4);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20rpx;
        font-size: 28rpx;
        img{
          width: 30rpx;
          margin-right: 5rpx;
        }
      }
    }
    .msg{
      display: flex;
      justify-content: space-between;
      padding:24rpx 32rpx 14rpx 32rpx;
      background: #fff;
      .left{
        width: 65%;
        .name{
          font-size: 32rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #111111;
          margin-bottom:16rpx;
        }
        .label_box{
          p{
            display: inline-block;
            padding:0 12rpx;
            height: 40rpx;
            line-height: 40rpx;
            background: #FFFFFF;
            border: 2rpx solid #00C200;
            border-radius: 10rpx;
            margin-right:16rpx;
            font-size: 22rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #00C200;
            margin-bottom:10rpx;
          }
        }
      }
      .status{
        height: 48rpx;
        line-height: 48rpx;
        background: #00C200;
        border-radius: 0 16rpx 0 16rpx;
        font-size: 24rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        padding:0 15rpx;
        &.on1{
          background: #F04925;
        }
        &.on2{
          background: #FF8515;
        }
        &.on3{
          background: #3A77E5;
        }
        &.on4{
          background: #9AA5BB;
        }
      }
    }
  }



  .yd_box{
    padding:0 32rpx;
    background: #fff;
    height: 88rpx;
    font-size: 26rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #FF8515;
    margin-top:30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 16rpx;
    margin:24rpx 16rpx 24rpx 16rpx;
    img{
      width: 26rpx;
      height: 26rpx;
      margin-right:12rpx;
    }
  }
  .list_box{
    margin:24rpx 16rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(30,53,88,0.02);
    border-radius: 16rpx;
    .box{
      display: flex;
      justify-content: space-between;
      font-size:28rpx;
      height: 96rpx;
      align-items: center;
      margin-left:32rpx;
      border-bottom:1px solid #F2F1F4;
      padding-right:32rpx;
      &:last-child{
        border-bottom:none;
      }
      .name{
        font-size: 28rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #111111;
        display: flex;
        align-items: center;
        span{
          display: inline-block;
          width: 36rpx;
          height: 36rpx;
          line-height: 36rpx;
          background: linear-gradient(136deg, #3AA6FF 0%, #53D7FF 100%);
          border-radius: 8rpx;
          font-size: 24rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
          text-align: center;
          margin-right:16rpx;
          &.tuan{
            background: linear-gradient(135deg, #FF9E45 0%, #FFD44A 100%);
          }
          &.quan{
            background: linear-gradient(135deg, #FF5F40 0%, #FFB452 100%);
          }
        }
      }
      .text{
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #666666;
        &.text_on{
          span{
            color:#00C200;
          }
        }
        &.text1{
          span{
          color:#FF5F40;
          }
        }
      }
      
    }
  }
  .play_msg{
    margin:0 16rpx;
    background: #fff;
    padding:32rpx 32rpx 0 32rpx;
    border-radius: 16rpx;
    .title{
      font-size: 30rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #111111;
      margin-bottom:10rpx;
    }
    img{
      width: 36rpx;
      height: 36rpx;
      margin-right:16rpx;
    }
    .nr{
      display: flex;
      align-items: center;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #111111;
      div{
        justify-content: end;
        padding-left:0;
        font-weight: 500;
        flex: 1;
        p{
          height: auto;
          padding-left:0;
          border-bottom:none;
          display: flex;
          align-items: baseline;
          color:#323233 !important;
          font-size:28rpx;
        }
        img{
          width: 40rpx;
        }
      }
    }
    .box{
      /deep/ .van-radio{
        justify-content: space-between;
        height: 96rpx;
        align-items: center;
        border-bottom:1px solid #F2F1F4;
      }
      /deep/ .van-radio__icon--checked{
        background: #00C200;
        border-color:#00C200;
      }
      /deep/ .van-radio__label{
        flex: 1;
      }
    }
  }

  
  .time_box{
    margin:24rpx 16rpx;
    display: flex;
    justify-content: space-between;
    background: #FFFFFF;
    box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(30,53,88,0.02);
    border-radius: 16rpx;
    padding:24rpx 32rpx;
    .box{
      width: 116rpx;
      height: 88rpx;
      background: #F6FBF6;
      border-radius: 8rpx;
      border:1px solid transparent;
      div{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction:column;
        justify-content: center;
      }
      .date{
        font-size: 26rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #111111;
        margin-bottom:8rpx;
      }
      .text{
        font-size: 26rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
      }
      &.on{
        pointer-events:none;
        border-color:#00C200;
        background: #EBFAEB;
      }
      .man_on{
        width: 100%;
        height: 100%;
        background: #F8F8F8;
        border: 2rpx solid #EEEEEE !important;
        border-radius: 8rpx;
        .date{
          color:#999999;
        }
        .text{
          color:#999999;
        }
      }
    }
  }
  .moshi_nr_box{
    box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(30,53,88,0.02);
    background: #fff;
    margin:0 16rpx;
    border-radius: 16rpx;
    padding-bottom:20rpx;
    .moshi_box{
      background: #F0F0F0;
      border-top-left-radius: 16rpx;
      border-top-right-radius: 16rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      .label{
        position: absolute;
        font-size: 20rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        color:#fff;
        width: 88rpx;
        height: 33rpx;
        line-height: 30rpx;
        top:8rpx;
        left:36%;
        text-align: center;
        img{
          width: 88rpx;
          height: 33rpx;
          position: absolute;
          top:0;
          right:0;
        }
        span{
          position: relative;
          z-index: 10;
        }
      }
      div{
        width: 50%;
        height: 88rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction:column;
        border-top-left-radius: 16rpx;
        border-top-right-radius: 16rpx;
        position: relative;
        
        .name{
          font-size: 32rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #666666;
        }
        .line{
          width: 48rpx;
          height: 6rpx;
          background: #00C200;
          border-radius: 4rpx;
          position: absolute;
          bottom:8rpx;
        }
        &.on{
          background: #FFFFFF;
          pointer-events:none;
          .name{
            font-size: 32rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #111111;
          }
        }
      }
    }
    .tc_box{
      .box{
        display: flex;
        align-items: baseline;
        margin-left:16rpx;
        padding-top:20rpx;
        .name{
          font-size: 28rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #111111;
          margin-left:16rpx;
        }
        .price{
          flex: 1;
          p{
            display: inline-block;
            margin:20rpx 20rpx 0 0;
            height: 56rpx;
            line-height: 56rpx;
            border: 2rpx solid #00C200;
            padding:0 16rpx;
            border-radius: 8rpx;
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            color: #00C200;
            &.on{
              background: #aaa;
              color:#fff;
              pointer-events:none;
              background: #00C200;
              border-color:#00C200;
            }
          }
        }
        .time{
          display: flex;
          align-items: center;
          .t{
            height: 56rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            padding:0 16rpx;
            border: 2rpx solid #00C200;
            border-radius: 8rpx;
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            color: #00C200;
            img{
              width: 28rpx;
              height: 28rpx;
              margin-left: 24rpx;
            }
          }
          .line{
            margin:0 16rpx;
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            color: #00C200;
          }
        }
      }
      .fg_line{
        margin-left:16rpx;
        height: 1px;
        background: #F2F1F4;
        margin-top:20rpx;
      }
    }
  }
  
  .time_slot_box{
    margin:0 30rpx;
    background: #F9F9FB;
    margin-top:10rpx;
    padding:30rpx 24rpx;
    border-radius: 10rpx;
    .title_box{
      display: flex;
      justify-content: space-between;
      margin-bottom:40rpx;
      .title{
        font-size:32rpx;
        font-weight: bold;
      }
      .right {
        display: flex;
        align-items: center;
        div {
          display: flex;
          align-items: center;
          margin-right: 30rpx;
          font-size: 24rpx;
          color: #3E3E3E;
          font-weight: 500;
          &:last-child{
            margin-right: 0;
          }
          p {
            width: 16rpx;
            height: 16rpx;
            border: 1px solid transparent;
            margin-right: 10rpx;
            &.blue {
              background: #3E3E3E;
            }
            &.none {
              background: #F57D26;
            }
            // &.disable {
            //   background: #d2fcfa;
            // }
          }
        }
      }
    }
    .showNum {
      display: flex;
      align-items: center;
      overflow: hidden;
      margin-top: 14rpx;
      text-align: center;
      font-size: 22rpx;
      color: rgb(104, 103, 103);
      width: 88%;
      margin:20rpx auto 0 auto;
      div {
        width: 4.2%;
        height: 15px;
      }
    }
    .time_slot{
      width: 92%;
      margin:0 auto;
      position: relative;
      .nr{
        display: flex;
        align-items: center;
        width: 94%;
        margin:0 auto;
        position: relative;
        .lx{
          width: 10rpx;
          height: 20rpx;
          position: absolute;
          right:-6rpx;
          top:0rpx;
          z-index: 10000;
          // z-index: 50;
          background: red;
          transform: skewX(30deg);
          transform: rotate(-58deg);
        }
        div{
          width: 26rpx;
          height: 10rpx;
          margin-right:-2rpx;
        }
        .noTt {
          background: #9A9A9A;
          text-align: right;
        }
        .isTt {
          background: #FB9F5C;
          text-align: right;
        }
        .noTt1 {
          background: #666666;
          text-align: right;
        }
        .isTt1 {
          background: #F57D26;
          text-align: right;
        }
      }
      .to_nr{
        transform: skewX(-30deg);
        position: relative;
        .sjx{
          position: absolute;
          right:-14rpx;
          bottom:0rpx;
          transform: skewX(30deg);
          width: 0;
          height: 0;
          border-left: 8rpx solid transparent;  
          border-right: 8rpx solid transparent;  
          border-bottom: 10rpx solid #CF6D26; 
        }
        .sjx_on{
          border-bottom-color:#555;
        }
      }
      .bottom_nr{
        position: relative;
        div {
          transform: skewX(30deg);
        }
        .sjx{
          position: absolute;
          right:-14rpx;
          bottom:0rpx;
          transform: skew(0deg);
          width: 0;
          height: 0;
          border-top: 10rpx solid #CF6D26;
          border-right: 8rpx solid transparent;
          border-left: 8rpx solid transparent;
        }
        .sjx_on{
          border-top-color:#555;
        }
      }
    }
    .showCont {
      border-radius: 10rpx;
      display: flex;
      align-items: center;
      overflow: hidden;
      width: 88%;
      margin:0 auto;
      div {
        width: 4.2%;
        height: 24rpx;
      }
      .hasTt {
        background: #788933;
        text-align: right;
      }
      .noTt {
        background: #3e3e3e;
        text-align: right;
      }
      .isTt {
        background: #788933;
        text-align: right;
      }
    }
  }
  
  .button_box{
    width: 100%;
    height: 146rpx;
    position: fixed;
    bottom:0;
    left:0;
    background: #fff;
    // ededed
    box-shadow: 0rpx -2rpx 2rpx 0rpx rgba(0,0,0,0.02);
    .box{
      width: 92%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin:0 auto;
      .price_box1{
        .price{
          color:#00C200;
          display: flex;
          align-items: baseline;
          font-size:30rpx;
          .totle1{
            font-size:30rpx !important;
            font-weight: 400 !important;
            color:#00C200;
            position: relative;
            top:6rpx !important;
          }
          span{
            font-size:52rpx;
            position: relative;
            top:2rpx;
            font-weight: 500;
          }
          /deep/.van-loading__spinner {
            color:#00C200 !important;
            width: 50rpx !important;
            height: 50rpx !important;
          }

        }
        .totle{
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #999999;
          position: relative;
          top:-10rpx;
        }
      }
      .price{
        font-size:30rpx;
        text-align: right;
        margin-right: 20px;
        display: flex;
        span{
          font-size: 46rpx;
          font-weight: 500;
          
        }
      }
      .button{
        font-family: PingFangSC-Regular, PingFang SC;
        border:none;
        width: 288rpx;
        height:80rpx;
        line-height: 80rpx;
        background: #00C200;
        border-radius: 40rpx;
        text-align: center;
        color: #fff;
        font-size: 32rpx;
      }
      .meituan{
        margin-right:30rpx;
        background: linear-gradient(to right, #FFDD48 50%, #FCCA4E 100%);
        color:#333;
      }
    }
  }
  .yy_pop_box{
  /deep/ .van-popup {
    background: none;
    width: 580rpx;
  }
  .box{
    width: 100%;
    height: 710rpx;
    font-size:28rpx;
    .bj{
      width: 100%;
      height: 100%;
      position: absolute;
      top:0;
      z-index: 1;
    }
    .nr{
      position: relative;
      z-index: 10;
      margin:0 20rpx 0 20rpx;
      padding-top:250rpx;
      .tips_text{
        font-size: 36rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #111111;
        margin-bottom:50rpx;
        text-align: center;
      }
      .nr_box{
        height: 260rpx;
        overflow-y: scroll;
      }
      .list{
        display: flex;
        justify-content: space-between;
        padding-left:20rpx;
        position: relative;
        height: 90rpx;
        .line{
          width: 2rpx;
          height: 90rpx;
          background: #E8E8E8;
          position: absolute;
          left: 10rpx;
        }
        .time_box1{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          position: relative;
          left: -20rpx;
          .quan{
            width: 18rpx;
            height: 18rpx;
            background: #FFFFFF;
            border: 2rpx solid #FF8515;
            border-radius: 50%;
            margin-right:18rpx;
          }
          .time{
            position: relative;
            width: 100%;
            height: 58rpx;
            line-height: 58rpx;
            background: #FFFFFF;
            font-size: 26rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FF8515;
            img {
              width: 100%;
              height: 100%;
              position: absolute;
              top:0;
            }
            .text{
              
              display: flex;
              justify-content: space-between;
              position: relative;
              z-index: 10;
              margin:0 28rpx;
            }
          }
        }
        &.on{
          .quan{
            border-color:#F04925
          }
          .text{
            color:#F04925;
          }
        }
      }
    }
    .anniu{
      width: 434rpx;
      height: 80rpx;
      line-height: 80rpx;
      background: #00C200;
      border-radius: 40rpx;
      font-size: 32rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      position: relative;
      z-index: 10;
      margin:58rpx auto 0 auto;
      text-align: center;
    }
  }
}
.tips_box{
    /deep/ .van-popup {
      background: none;
      height: 624rpx !important;
    }
    .box{
      height: 624rpx;
    }
    .nr_box{
      height: auto !important;
    }
    .nr{
      padding-top:180rpx !important;
      margin:0 48rpx !important;
      text-align: center;
      .tips_text{
        margin-bottom:48rpx;
      }
      .tips_text1{
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #666666;
        margin:0 26rpx;
      }
      .tips_text3{
        padding:0 20rpx;
        display: inline-block;
        height: 58rpx;
        line-height: 58rpx;
        background: #F9F9F9;
        border-radius: 16rpx;
        margin-top:32rpx;
        font-size: 26rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #999999;
        text-align: center;
      }
    }
  }
  .zb_on{
    background: #9AA5BB !important;
  }
  .tips_clear{
    width: 92%;
    margin:0 auto;
    text-align: right;
    color:red;
    font-size:24rpx;
    position: relative;
    top:20rpx;
  }
}
</style>